<template>
    <div class="detail-page">
        <AppHeader :user="user" :handleLogout="handleLogout" />

        <template v-if="question">
            <div class="detail-content-wrapper">
                <div class="question-detail-card">
                    <h1 class="question-title">{{ question.title }}</h1>
                    <div class="question-meta-bar">
                        <div class="author-info">
                            <span class="meta-icon">👤</span>
                            <span>{{ question.author }}</span>
                        </div>
                        <span class="meta-item">{{ formatDate(question.createdAt) }}</span>
                        <span class="meta-item">{{ question.viewCount }} 浏览</span>
                        <span class="meta-item question-module">问题模块: 其他开发相关的问题</span>
                    </div>
                    <div class="question-body">
                        <div class="question-content">{{ question.content }}</div>
                        <div class="question-actions">
                            <button class="action-button primary">回答</button>
                            <button class="action-button">关注问题</button>
                            <button class="action-button">邀请回答</button>
                            <div class="spacer"></div>
                            <button class="action-button icon-button"><span class="icon">&#9734;</span> 收藏</button>
                            <button class="action-button icon-button"><span class="icon">&#x21B9;</span> 分享</button>
                            <button class="action-button icon-button">...</button>
                        </div>
                    </div>
                </div>

                <div class="answer-section">
                    <h3 class="answer-section-title">{{ answers.length }} 个回答</h3>
                    <div v-if="answers.length === 0" class="no-answers">暂无回答</div>
                    <div v-for="answer in answers" :key="answer.id" class="answer-card">
                        <div class="answer-meta">
                            <div class="answer-author">
                                <span class="avatar-placeholder">👤</span>
                                <span class="author-name">{{ answer.author }}</span>
                                <span class="level-badge">⭐</span>
                                <span class="status-badge">⬇</span>
                            </div>
                            <span class="answer-time">{{ formatDate(answer.createdAt) }}</span>
                        </div>
                        <div class="answer-content">{{ answer.content }}</div>
                        <div class="answer-actions">
                            <button class="vote-button"><span class="icon">▲</span> 有用</button>
                            <button class="vote-button"><span class="icon">▼</span></button>
                            <button class="reply-button"><span class="icon">💬</span> 回复</button>
                        </div>
                    </div>
                </div>

                <div class="add-answer-form" v-if="user">
                    <div class="toolbar">
                        <button type="button" class="toolbar-btn">B</button>
                        <button type="button" class="toolbar-btn"><i class="fas fa-pencil-alt"></i></button>
                        <button type="button" class="toolbar-btn">&lt;/&gt;</button>
                        <button type="button" class="toolbar-btn"><i class="fas fa-link"></i></button>
                        <button type="button" class="toolbar-btn"><i class="fas fa-image"></i></button>
                        <button type="button" class="toolbar-btn"><i class="fas fa-video"></i></button>
                    </div>
                    <textarea v-model="answerContent" placeholder="请输入你的回答" required></textarea>
                    <button type="submit" class="submit-answer-button" @click="submitAnswer">发表</button>
                </div>
                <div v-else class="login-tip">请登录 后发表内容</div>
            </div>
        </template>
        <div v-else class="loading-tip">加载中...</div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import AppHeader from '../components/AppHeader.vue'

const route = useRoute()
const router = useRouter()
const question = ref(null)
const answers = ref([])
const answerContent = ref('')
const user = ref(JSON.parse(localStorage.getItem('user') || 'null'))

const formatDate = (dateString) => {
    const date = new Date(dateString);
    const now = new Date();
    const diffTime = Math.abs(now - date);
    const diffMinutes = Math.ceil(diffTime / (1000 * 60));
    const diffHours = Math.ceil(diffTime / (1000 * 60 * 60));
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    if (diffMinutes < 60) {
        return `${diffMinutes} 分钟前`;
    } else if (diffHours < 24) {
        return `${diffHours} 小时前`;
    } else if (diffDays < 7) {
        return `${diffDays} 天前`;
    } else {
        return new Date(dateString).toLocaleDateString('zh-CN', { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' });
    }
}

const fetchDetail = async () => {
    try {
        const res = await axios.get(`/api/questions/${route.params.id}`)
        question.value = res.data.question
        answers.value = res.data.answers
    } catch (error) {
        alert('加载失败: ' + (error.response?.data?.msg || JSON.stringify(error.response?.data) || error.message))
    }
}

const submitAnswer = async () => {
    if (!answerContent.value.trim()) return
    try {
        await axios.post(`/api/questions/${route.params.id}/answers`, {
            content: answerContent.value
        }, {
            headers: {
                Authorization: 'Bearer ' + user.value.token
            }
        })
        answerContent.value = ''
        fetchDetail()
    } catch (error) {
        alert('提交回答失败: ' + (error.response?.data?.msg || JSON.stringify(error.response?.data) || error.message))
    }
}

onMounted(() => {
    fetchDetail()
})
</script>

<style scoped>
.detail-page {
    min-height: 100vh;
    background-color: #f5f5f5;
}

.detail-content-wrapper {
    max-width: 70%;
    margin: 20px 15% 0 15%;
    padding: 0;
    overflow: hidden;
}

.question-detail-card {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    padding: 2.5rem 2.8rem;
    margin-bottom: 20px;
}

.question-title {
    font-size: 1.8rem;
    color: #333;
    font-weight: 600;
    margin: 0 0 1.2rem 0;
    line-height: 1.4;
}

.question-meta-bar {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #eee;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #555;
    font-weight: 500;
    margin-right: 1.5rem;
}

.meta-icon {
    font-size: 1rem;
    color: #666;
}

.meta-item {
    margin-right: 1.5rem;
}

.question-module {
    background-color: #f0f0f0;
    padding: 3px 8px;
    border-radius: 4px;
    color: #666;
    font-size: 0.8rem;
}

.question-body {
    border-bottom: 1px dashed #eee;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.question-content {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
    white-space: pre-wrap;
}

.question-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.5rem;
}

.action-button {
    background: #f8f8f8;
    border: 1px solid #eee;
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #555;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.action-button:hover {
    background-color: #eef;
    border-color: #ddd;
}

.action-button.primary {
    background-color: #07c160;
    color: white;
    border-color: #07c160;
    font-weight: bold;
}

.action-button.primary:hover {
    background-color: #05ae56;
    border-color: #05ae56;
}

.action-button .icon {
    font-size: 1rem;
}

.spacer {
    flex-grow: 1;
}

.answer-section {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    padding: 2.5rem 2.8rem;
    margin-bottom: 20px;
}

.answer-section-title {
    font-size: 1.5rem;
    color: #333;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.no-answers {
    color: #888;
    text-align: center;
    padding: 2rem 0;
    font-size: 1rem;
}

.answer-card {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem 2rem;
    margin-bottom: 15px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.03);
}

.answer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.answer-author {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: #555;
    font-weight: 500;
}

.avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #e0e0e0;
    /* 灰色背景 */
    color: #888;
    /* 较深的灰色图标 */
    font-size: 1.2rem;
    font-weight: bold;
}

.level-badge {
    background-color: #ffcc00;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
}

.status-badge {
    background-color: #07c160;
    color: white;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 5px;
}

.answer-time {
    font-size: 0.8rem;
    color: #999;
}

.answer-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 1.2rem;
    white-space: pre-wrap;
}

.answer-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.vote-button {
    background: none;
    border: 1px solid #eee;
    padding: 0.4rem 0.8rem;
    border-radius: 16px;
    font-size: 0.8rem;
    cursor: pointer;
    color: #666;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.vote-button:hover {
    background-color: #f0f0f0;
    border-color: #ddd;
}

.reply-button {
    background: none;
    border: none;
    color: #666;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.4rem 0.8rem;
    border-radius: 16px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.reply-button:hover {
    background-color: #f0f0f0;
}

.add-answer-form {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    padding: 2.5rem 2.8rem 2.8rem 2.8rem;
}

.add-answer-form h3 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #333;
}

.add-answer-form textarea {
    width: 100%;
    min-height: 150px;
    margin-bottom: 1.5rem;
    border-radius: 6px;
    border: 1px solid #eee;
    padding: 1rem;
    font-size: 0.95rem;
    resize: vertical;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease;
    background-color: #fefefe;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.add-answer-form textarea:focus {
    border-color: #07c160;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(7, 193, 96, 0.1);
    outline: none;
}

.add-answer-form .toolbar {
    background-color: #f8f8f8;
    border: 1px solid #eee;
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 0.5rem 1rem;
    display: flex;
    gap: 0.8rem;
}

.add-answer-form .toolbar-btn {
    background: none;
    border: 1px solid transparent;
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    color: #666;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.add-answer-form .toolbar-btn:hover {
    background-color: #e8e8e8;
    border-color: #d0d0d0;
}

.submit-answer-button {
    background: #07c160;
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 0.8rem 2rem;
    font-size: 1rem;
    cursor: pointer;
    font-weight: bold;
    width: auto;
    float: right;
    box-shadow: 0 4px 10px rgba(7, 193, 96, 0.3);
    transition: all 0.2s ease;
}

.submit-answer-button:hover {
    background-color: #05ae56;
    box-shadow: 0 6px 15px rgba(7, 193, 96, 0.4);
}

.login-tip {
    color: #888;
    margin-top: 1.5rem;
    text-align: center;
    font-weight: 500;
    padding: 2rem;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.loading-tip {
    text-align: center;
    padding: 50px;
    font-size: 1.2rem;
    color: #666;
}
</style>